<template>
	<view class="grab-hall-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="抢单大厅" :show-back="true">
			<view slot="right" class="rules-btn" @click="showRules">
				<text class="rules-text">规则</text>
			</view>
		</custom-navbar>
		
		<!-- 筛选和排序栏 -->
		<view class="filter-bar">
			<view class="filter-left">
				<text class="order-count">附近{{ orderList.length }}单</text>
			</view>
			<view class="filter-right">
				<view class="filter-item" @click="showFilter">
					<text class="filter-text">筛选</text>
					<text class="filter-arrow">▼</text>
				</view>
				<view class="filter-item" @click="showSort">
					<text class="filter-text">综合排序</text>
					<text class="filter-arrow">▼</text>
				</view>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y="true">
			<view class="order-item" v-for="(order, index) in orderList" :key="index">
				<view class="order-content">
					<!-- 顶部水平信息栏 -->
					<view class="top-info-bar">
						<!-- 出发时间 -->
						<view class="info-item">
							<text class="info-label">出发时间</text>
							<text class="info-value orange">{{ order.departureTime }}</text>
						</view>
						
						<!-- 距离 -->
						<view class="info-item">
							<text class="info-label">距您</text>
							<text class="info-value distance">{{ order.distance }}<text style="font-size: 15rpx;">km</text></text>
						</view>
						
						<!-- 一口价 -->
						<view class="info-item">
							<text class="info-label">一口价</text>
							<view class="price-container">
								<text class="info-value price">{{ order.price }}<text style="font-size: 15rpx;">元</text></text>
							</view>
						</view>
					</view>
					
					<!-- 路线信息 -->
					<view class="route-info">
						<view class="route-item">
							<view class="route-dot green"></view>
							<text class="route-text">{{ order.pickupLocation }}</text>
						</view>
						<view class="route-item">
							<view class="route-dot red"></view>
							<text class="route-text">{{ order.dropoffLocation }}</text>
						</view>
						<view class="route-item">
							<uni-icons type="location-filled" size="10" class="route-icon"></uni-icons>
							<!-- <image src="/static/电话.png" class="route-icon"></image> -->
							<text class="route-text">{{ order.totalDistance }}</text>
						</view>
					</view>
					
					<!-- 服务类型标签和抢单按钮 -->
					<view class="bottom-bar">
						<view class="service-tag">
							<text class="tag-text">{{ order.serviceType }}</text>
						</view>
						
						<!-- 右下角抢单按钮 -->
						<view class="grab-btn-container">
							<button class="grab-btn" @click="grabOrder(order, index)">
								<text class="grab-btn-text">抢单</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">筛选条件</text>
					<text class="popup-close" @click="closeFilter">×</text>
				</view>
				<view class="filter-options">
					<view class="option-group">
						<text class="option-title">服务类型</text>
						<view class="option-list">
							<view class="option-item" v-for="type in serviceTypes" :key="type" 
								  :class="{ active: selectedServiceType === type }"
								  @click="selectServiceType(type)">
								<text class="option-text">{{ type }}</text>
							</view>
						</view>
					</view>
					<view class="option-group">
						<text class="option-title">价格范围</text>
						<view class="price-range">
							<input class="price-input" type="number" placeholder="最低价" v-model="minPrice" />
							<text class="price-separator">-</text>
							<input class="price-input" type="number" placeholder="最高价" v-model="maxPrice" />
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="reset-btn" @click="resetFilter">重置</button>
					<button class="confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 排序弹窗 -->
		<uni-popup ref="sortPopup" type="bottom">
			<view class="sort-popup">
				<view class="popup-header">
					<text class="popup-title">排序方式</text>
					<text class="popup-close" @click="closeSort">×</text>
				</view>
				<view class="sort-options">
					<view class="sort-item" v-for="sort in sortOptions" :key="sort.value"
						  :class="{ active: selectedSort === sort.value }"
						  @click="selectSort(sort.value)">
						<text class="sort-text">{{ sort.label }}</text>
						<text class="sort-check" v-if="selectedSort === sort.value">✓</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			orderList: [
				{
					id: 1,
					departureTime: '现在出发',
					distance: '7.59',
					price: '13.34',
					pickupLocation: '橡树湾-东北门',
					dropoffLocation: '宝龙广场',
					totalDistance: '全程7.14km',
					serviceType: '滴滴拼车'
				},
				{
					id: 2,
					departureTime: '现在出发',
					distance: '8.23',
					price: '5.62',
					pickupLocation: '智慧大道|秋比特汽车会所',
					dropoffLocation: '闽侯县|慕尚汽车一站式服务',
					totalDistance: '全程3.02km',
					serviceType: '滴滴拼车'
				},
				{
					id: 3,
					departureTime: '现在出发',
					distance: '6.78',
					price: '10.43',
					pickupLocation: '金山|泰禾红树林-东北1门',
					dropoffLocation: '金山|久号食堂(飞客店)',
					totalDistance: '全程4.92km',
					serviceType: '滴滴拼车'
				},
				{
					id: 4,
					departureTime: '现在出发',
					distance: '5.12',
					price: '8.76',
					pickupLocation: '鼓楼区|三坊七巷',
					dropoffLocation: '台江区|万达广场',
					totalDistance: '全程6.23km',
					serviceType: '滴滴拼车'
				},
				{
					id: 5,
					departureTime: '现在出发',
					distance: '9.45',
					price: '15.28',
					pickupLocation: '仓山区|金山万达',
					dropoffLocation: '晋安区|东二环泰禾',
					totalDistance: '全程8.67km',
					serviceType: '滴滴拼车'
				},
				{
					id: 6,
					departureTime: '现在出发',
					distance: '4.33',
					price: '7.89',
					pickupLocation: '马尾区|马尾万达',
					dropoffLocation: '马尾区|江滨公园',
					totalDistance: '全程5.12km',
					serviceType: '滴滴拼车'
				}
			],
			serviceTypes: ['滴滴拼车', '滴滴快车', '滴滴专车', '滴滴出租车'],
			selectedServiceType: '',
			minPrice: '',
			maxPrice: '',
			selectedSort: 'comprehensive',
			sortOptions: [
				{ label: '综合排序', value: 'comprehensive' },
				{ label: '距离最近', value: 'distance' },
				{ label: '价格最高', value: 'price_high' },
				{ label: '价格最低', value: 'price_low' },
				{ label: '时间最早', value: 'time_early' }
			]
		}
	},
	onLoad() {
		// 页面加载
	},
	methods: {
		// 显示规则
		showRules() {
			uni.showModal({
				title: '抢单规则',
				content: '1. 抢单成功后需在5分钟内到达上车点\n2. 取消订单将影响信用分\n3. 完成订单可获得相应奖励',
				showCancel: false
			})
		},
		
		// 显示筛选
		showFilter() {
			this.$refs.filterPopup.open()
		},
		
		// 关闭筛选
		closeFilter() {
			this.$refs.filterPopup.close()
		},
		
		// 选择服务类型
		selectServiceType(type) {
			this.selectedServiceType = this.selectedServiceType === type ? '' : type
		},
		
		// 重置筛选
		resetFilter() {
			this.selectedServiceType = ''
			this.minPrice = ''
			this.maxPrice = ''
		},
		
		// 应用筛选
		applyFilter() {
			// 这里实现筛选逻辑
			this.closeFilter()
			uni.showToast({
				title: '筛选已应用',
				icon: 'success'
			})
		},
		
		// 显示排序
		showSort() {
			this.$refs.sortPopup.open()
		},
		
		// 关闭排序
		closeSort() {
			this.$refs.sortPopup.close()
		},
		
		// 选择排序
		selectSort(value) {
			this.selectedSort = value
			this.closeSort()
			// 这里实现排序逻辑
			uni.showToast({
				title: '排序已更新',
				icon: 'success'
			})
		},
		
		// 抢单
		grabOrder(order, index) {
			uni.showModal({
				title: '确认抢单',
				content: `确定要抢取这单吗？\n价格：${order.price}\n距离：${order.distance}`,
				success: (res) => {
					if (res.confirm) {
						// 模拟抢单成功
						uni.showToast({
							title: '抢单成功！',
							icon: 'success'
						})
						// 从列表中移除已抢取的订单
						this.orderList.splice(index, 1)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.grab-hall-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
}

.rules-btn {
	padding: 0 20rpx;
	
	.rules-text {
		font-size: 28rpx;
		color: #ffffff;
	}
}

.filter-bar {
	background: #f8f8f8;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e5e5e5;
	
	.filter-left {
		.order-count {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}
	}
	
	.filter-right {
		display: flex;
		gap: 60rpx;
		
		.filter-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.filter-text {
				font-size: 26rpx;
				color: #666666;
			}
			
			.filter-arrow {
				font-size: 18rpx;
				color: #999999;
			}
		}
	}
}

.order-list {
	height: calc(100vh - 200rpx);
	padding: 0;
}

.order-item {
	background: #ffffff;
	margin-bottom: 0;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	.order-content {
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		
		.top-info-bar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			
			.info-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				
				&:not(:last-child) {
					margin-right: 20rpx;
				}
				
				.info-label {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 6rpx;
					line-height: 1;
				}
				
				.info-value {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
					line-height: 1.2;
					
					&.orange {
						color: #FF9500;
						font-size: 32rpx;
						font-weight: 600;
					}
					
					&.distance {
						font-size: 40rpx;
						font-weight: 700;
						color: #000000;
					}
					
					&.price {
						font-size: 40rpx;
						font-weight: 700;
						color: #000000;
					}
				}
				
				.price-container {
					display: flex;
					align-items: center;
					gap: 6rpx;
					
					.info-icon {
						width: 24rpx;
						height: 24rpx;
						background: #007AFF;
						color: #ffffff;
						border-radius: 50%;
						font-size: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
					}
				}
			}
		}
		
		.route-info {
			margin: 0 0 20rpx 0;
			
			.route-item {
				display: flex;
				align-items: center;
				margin-bottom: 14rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.route-dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-right: 14rpx;
					flex-shrink: 0;
					
					&.green {
						background: #34C759;
					}
					
					&.red {
						background: #FF3B30;
					}
				}
				
				.route-icon {
					// width: 18rpx;
					// height: 18rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
				
				.route-text {
					font-size: 26rpx;
					color: #333333;
					line-height: 1.3;
				}
			}
		}
		
		.bottom-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.service-tag {
				.tag-text {
					color: #666666;
					font-size: 22rpx;
					padding: 4rpx 10rpx;
					border-radius: 3rpx;
					display: inline-block;
					border-radius: 10rpx;
					border: 1rpx solid #f0f0f0;
				}
			}
			
			.grab-btn-container {
				.grab-btn {
					background: #FF9500;
					color: #ffffff;
					border: none;
					border-radius: 4rpx;
					padding: 20rpx 28rpx;
					font-size: 28rpx;
					font-weight: 500;
					min-width: 90rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.grab-btn-text {
						color: #ffffff;
						font-size: 28rpx;
						font-weight: 500;
					}
					
					&:active {
						background: #e6850e;
					}
				}
			}
		}
	}
}

.filter-popup, .sort-popup {
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}
		
		.popup-close {
			font-size: 40rpx;
			color: #999999;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.filter-options {
	.option-group {
		margin-bottom: 40rpx;
		
		.option-title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.option-list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.option-item {
				padding: 16rpx 32rpx;
				border: 2rpx solid #e0e0e0;
				border-radius: 8rpx;
				background: #ffffff;
				
				&.active {
					border-color: #FF9500;
					background: #fff5e6;
					
					.option-text {
						color: #FF9500;
					}
				}
				
				.option-text {
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
		
		.price-range {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.price-input {
				flex: 1;
				height: 80rpx;
				border: 2rpx solid #e0e0e0;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 26rpx;
			}
			
			.price-separator {
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
		
		.reset-btn, .confirm-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: none;
		}
		
		.reset-btn {
			background: #f0f0f0;
			color: #666666;
		}
		
		.confirm-btn {
			background: #FF9500;
			color: #ffffff;
		}
	}
}

.sort-options {
	.sort-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.active {
			.sort-text {
				color: #FF9500;
				font-weight: 500;
			}
			
			.sort-check {
				color: #FF9500;
			}
		}
		
		.sort-text {
			font-size: 28rpx;
			color: #333333;
		}
		
		.sort-check {
			font-size: 32rpx;
			color: #999999;
		}
	}
}
</style>
